<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>前端面试经典问题 | 宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="1. JS事件的捕获和冒泡下面代码执行结果的顺序:html代码如下: &amp;lt;html&amp;gt;     &amp;lt;body&amp;gt;         &amp;lt;div id=&quot;test&quot;&amp;gt;             &amp;lt;ul&amp;gt;                 &amp;lt;li&amp;gt;捕获和冒泡&amp;lt;/li&amp;gt;             &amp;lt;/ul&amp;gt;         &amp;lt;/di">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试经典问题">
<meta property="og:url" content="http://ikkkr.com/2016/04/25/前端面试经典问题/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="1. JS事件的捕获和冒泡下面代码执行结果的顺序:html代码如下: &amp;lt;html&amp;gt;     &amp;lt;body&amp;gt;         &amp;lt;div id=&quot;test&quot;&amp;gt;             &amp;lt;ul&amp;gt;                 &amp;lt;li&amp;gt;捕获和冒泡&amp;lt;/li&amp;gt;             &amp;lt;/ul&amp;gt;         &amp;lt;/di">
<meta property="og:locale" content="default">
<meta property="og:image" content="http://rainzhai.github.io/images/browser_compont.png">
<meta property="og:image" content="http://rainzhai.github.io/images/render_step.png">
<meta property="og:image" content="http://rainzhai.github.io/images/parser_step.png">
<meta property="og:image" content="https://segmentfault.com/a/1190000005875191">
<meta property="og:updated_time" content="2016-12-02T16:09:26.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试经典问题">
<meta name="twitter:description" content="1. JS事件的捕获和冒泡下面代码执行结果的顺序:html代码如下: &amp;lt;html&amp;gt;     &amp;lt;body&amp;gt;         &amp;lt;div id=&quot;test&quot;&amp;gt;             &amp;lt;ul&amp;gt;                 &amp;lt;li&amp;gt;捕获和冒泡&amp;lt;/li&amp;gt;             &amp;lt;/ul&amp;gt;         &amp;lt;/di">
<meta name="twitter:image" content="http://rainzhai.github.io/images/browser_compont.png">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-前端面试经典问题" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2016/04/25/前端面试经典问题/" class="article-date">
  <time datetime="2016-04-25T03:32:18.000Z" itemprop="datePublished">2016-04-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/前端/">前端</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      前端面试经典问题
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-JS事件的捕获和冒泡"><a href="#1-JS事件的捕获和冒泡" class="headerlink" title="1. JS事件的捕获和冒泡"></a>1. JS事件的捕获和冒泡</h3><p>下面代码执行结果的顺序:<br>html代码如下:</p>
<pre><code class="html"><span class="tag">&lt;<span class="name">html</span>&gt;</span>
    <span class="tag">&lt;<span class="name">body</span>&gt;</span>
        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test"</span>&gt;</span>
            <span class="tag">&lt;<span class="name">ul</span>&gt;</span>
                <span class="tag">&lt;<span class="name">li</span>&gt;</span>捕获和冒泡<span class="tag">&lt;/<span class="name">li</span>&gt;</span>
            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>
        <span class="tag">&lt;/<span class="name">div</span>&gt;</span>
    <span class="tag">&lt;/<span class="name">body</span>&gt;</span>
<span class="tag">&lt;/<span class="name">html</span>&gt;</span>
</code></pre>
<p>javascript代码如下:</p>
<pre><code class="javascript"><span class="keyword">var</span> html = <span class="built_in">document</span>.documentElement;
<span class="keyword">var</span> body = <span class="built_in">document</span>.body;
<span class="keyword">var</span> div = body.querySelector(<span class="string">'div'</span>);
<span class="keyword">var</span> ul = body.querySelector(<span class="string">'ul'</span>);
<span class="keyword">var</span> li = body.querySelector(<span class="string">'li'</span>);

ul.addEventListener(<span class="string">'click'</span>,callback,<span class="literal">true</span>);
li.addEventListener(<span class="string">'click'</span>,callback,<span class="literal">true</span>);
div.addEventListener(<span class="string">'click'</span>,callbackdiv2,<span class="literal">true</span>);

body.addEventListener(<span class="string">'click'</span>,callback,<span class="literal">false</span>);
html.addEventListener(<span class="string">'click'</span>,callback,<span class="literal">false</span>);

<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">event</span>)</span>{
    <span class="keyword">var</span> target = event.currentTarget;
    <span class="built_in">console</span>.log(target.tagName);
}

<span class="function"><span class="keyword">function</span> <span class="title">callbackdiv</span>(<span class="params">event</span>)</span>{
    <span class="comment">//event.stopPropagation();</span>
    <span class="built_in">console</span>.log(<span class="string">"div callback"</span>);
}

<span class="comment">//输出什么内容</span>
<span class="comment">//div callback -&gt;ul-&gt;li-&gt;body-&gt;html</span>
</code></pre>
<p>总结就是：先捕获，后冒泡，捕获从上到下，冒泡从下到上（形象点说法：捕获像石头沉入海底，冒泡则像气泡冒出水面）<br>问：假如去掉注释 event.stopPropagation();  结果又会输出什么？<br>结果：事件在div元素上传播被阻止，只有div元素响应事件。(还有就是在点击空白区域的时候html元素依然响应事件)</p>
<h3 id="2-如何消除一个数组里面重复的元素？"><a href="#2-如何消除一个数组里面重复的元素？" class="headerlink" title="2. 如何消除一个数组里面重复的元素？"></a>2. 如何消除一个数组里面重复的元素？</h3><pre><code class="javascript"><span class="comment">//1. 使用indexOf判断新数组,但ie低版本不支持</span>
<span class="function"><span class="keyword">function</span> <span class="title">unique1</span>(<span class="params">arr</span>)</span>{
    <span class="keyword">var</span> tmpArr = [];
    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;arr.length; i++){
      <span class="comment">//如果当前数组的第i已经保存进了临时数组，那么跳过，</span>
      <span class="comment">//否则把当前项push到临时数组里面</span>
      <span class="keyword">if</span>(tmpArr.indexOf(arr[i]) == <span class="number">-1</span>){
        tmpArr.push(arr[i]);
      }
    }
    <span class="keyword">return</span> tmpArr;
}

<span class="comment">//2. hash查找</span>
<span class="function"><span class="keyword">function</span> <span class="title">unique2</span>(<span class="params">arr</span>)</span>{
    <span class="keyword">var</span> tmpArr = [], hash = {};<span class="comment">//hash为hash表</span>
    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++){
      <span class="keyword">if</span>(!hash[arr[i]]){<span class="comment">//如果hash表中没有当前项</span>
        hash[arr[i]] = <span class="literal">true</span>;<span class="comment">//存入hash表</span>
        tmpArr.push(arr[i]);<span class="comment">//存入临时数组</span>
      }
    }
    <span class="keyword">return</span> tmpArr;
} 

<span class="comment">//3. 先排序后比前后大小</span>
<span class="built_in">Array</span>.prototype.unique3 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
        <span class="keyword">var</span> temp = <span class="keyword">new</span> <span class="built_in">Array</span>();
        <span class="keyword">this</span>.sort();
        <span class="keyword">for</span>(i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++) {
          <span class="keyword">if</span>( <span class="keyword">this</span>[i] == <span class="keyword">this</span>[i+<span class="number">1</span>]) {
            <span class="keyword">continue</span>;
        }
          temp[temp.length]=<span class="keyword">this</span>[i];
        }
        <span class="keyword">return</span> temp;
} 

<span class="comment">//4. 正则匹配</span>
<span class="built_in">Array</span>.prototype.unique4 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
        <span class="keyword">return</span> <span class="keyword">this</span>.sort().join(<span class="string">",,"</span>).replace(<span class="regexp">/(,|^)([^,]+)(,,\2)+(,|$)/g</span>,<span class="string">"$1$2$4"</span>).replace(<span class="regexp">/,,+/g</span>,<span class="string">","</span>).replace(<span class="regexp">/,$/</span>,<span class="string">""</span>).split(<span class="string">","</span>);
}
</code></pre>
<h3 id="3-在Javascript中什么是伪数组？如何将伪数组转化为标准数组？"><a href="#3-在Javascript中什么是伪数组？如何将伪数组转化为标准数组？" class="headerlink" title="3. 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？"></a>3. 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？</h3><pre><code class="javascript"><span class="comment">//argument参数，还有像调用getElementsByTagName,document.childNodes之类</span>
<span class="keyword">var</span> toArray = <span class="function"><span class="keyword">function</span>(<span class="params">s</span>)</span>{
    <span class="keyword">try</span>{
        <span class="comment">//s调用Array的原型slice方法，返回一个新数组</span>
        <span class="keyword">return</span> <span class="built_in">Array</span>.prototype.slice.call(s);
    } <span class="keyword">catch</span>(e){
            <span class="keyword">var</span> arr = [];
            <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>,len = s.length; i &lt; len; i++){
                <span class="comment">//arr.push(s[i]);</span>
                   arr[i] = s[i];  <span class="comment">//据说这样比push快</span>
            }
             <span class="keyword">return</span> arr;
    }
}
</code></pre>
<a id="more"></a>
<h3 id="4-Javascript跨域方案"><a href="#4-Javascript跨域方案" class="headerlink" title="4. Javascript跨域方案"></a>4. Javascript跨域方案</h3><ol>
<li><p>JSONP<br>　　JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。</p>
</li>
<li><p>通过修改 document.domain 来跨子域<br>把<a href="http://www.example.com/a.html" target="_blank" rel="noopener">http://www.example.com/a.html</a> 和 <a href="http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com" target="_blank" rel="noopener">http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com</a> 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。</p>
</li>
<li><p>使用window.name来进行跨域(没有浏览器兼容问题)<br>window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。<br>我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。</p>
</li>
</ol>
<p>4、使用HTML5中新引进的window.postMessage方法来跨域传送数据<br>window.postMessage(message,targetOrigin)  方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。<br>调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 *  。<br>需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。示例代码如下:</p>
<pre><code class="html">//a.html
<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span>
<span class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">onLoad</span>(<span class="params"></span>)</span>{</span>
<span class="javascript"><span class="keyword">var</span> iframe = <span class="built_in">document</span>.getElementById(<span class="string">'iframe'</span>);</span>
<span class="javascript"><span class="keyword">var</span> win = iframe.contentWindow;</span>
<span class="javascript">win.postMessage(<span class="string">'的尽快发货上看到'</span>, <span class="string">'*'</span>);</span>
<span class="undefined">}</span>
<span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>

<span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">'iframe'</span> <span class="attr">src</span>=<span class="string">"http://127.0.0.1/postmsg/b.html"</span> <span class="attr">onload</span>=<span class="string">"onLoad()"</span>&gt;</span>
<span class="tag">&lt;/<span class="name">iframe</span>&gt;</span>

//b.html
<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span>
<span class="javascript"><span class="built_in">window</span>.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span>
<span class="undefined">e = e || event;</span>
<span class="undefined">alert(e.data);</span>
<span class="undefined">}</span>
<span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
</code></pre>
<h3 id="5-一个页面从输入-URL-到页面加载显示完成，这个过程中都发生了什么？"><a href="#5-一个页面从输入-URL-到页面加载显示完成，这个过程中都发生了什么？" class="headerlink" title="5. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？"></a>5. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？</h3><pre><code>分为4个步骤：
（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
（2）， 浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
（3），一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
（4），此时，`Web`服务器提供资源服务，客户端开始下载资源。
</code></pre><p>请求返回后，便进入了我们关注的前端模块<br>简单来说，浏览器会解析<code>HTML</code>生成<code>DOM Tree</code>，其次会根据CSS生成CSS Rule Tree，而<code>javascript</code>又可以根据<code>DOM API</code>操作<code>DOM</code></p>
<h3 id="6-浏览器内核工作原理"><a href="#6-浏览器内核工作原理" class="headerlink" title="6. 浏览器内核工作原理"></a>6. 浏览器内核工作原理</h3><p>浏览器的主要结构如下：</p>
<ol>
<li>用户界面-包括地址栏、后退/前进按钮、书签菜单等。</li>
<li>浏览器引擎- 询问和操作渲染引擎的接口</li>
<li>渲染引擎-负责展现所请求的内容，比如如果请求的是html，它就负责解析html和css并且在屏幕上呈现解析后的内容。</li>
<li>网络模块-网络请求用，比如http请求。它有跨平台的接口以及对应于每个平台的底层实现。</li>
<li>UI后端-用来绘制基本构件，如下拉框和窗口。UI后端暴露出一个平台无关性的公共接口，底层的它使用操作系统的UI方法。</li>
<li>javascript解释器—用来解析和执行javascript代码。</li>
<li>数据存储–这是一个可存储的层。浏览器需要在硬盘上保存各种数据，比如cookies。新的html规范（html5）把浏览器中的“web database”定义为一个完完全全的（虽然很轻）数据库。<br><img src="http://rainzhai.github.io/images/browser_compont.png" alt="浏览器组件"></li>
</ol>
<p>渲染引擎主要流程<br>渲染引擎开始会从网络模块获取要请求的文档内容，一般会以8k大小的区块获取。<br>在获取内容之后，是渲染引擎的基本流程：<br><img src="http://rainzhai.github.io/images/render_step.png" alt="渲染引擎主要流程"></p>
<p>渲染引擎开始解析HTML文档，并且把标签转换成“内容树”上的DOM节点，然后会解析样式，包括外部的css文件和style元素里的数据。这些样式信息将会和HTML中视觉性的属性组合在一起<br>创建另一个树—渲染树。<br>渲染树由带有如颜色和大小等视觉属性的矩形区域构成，这些矩形区域按它们将要显示在屏幕上的顺序排列。<br>渲染树构造完成后，进入到布局阶段，会把每个节点精确地调整到它应该在屏幕上出现的位置上。<br>下一步是绘制，渲染树将会被遍历，每个节点都会通过UI后端层来绘制。<br>理解这是一个渐进的过程相当重要。为了有更好的用户体验，渲染引擎将会尽可能早的把内容在屏幕上显示出来，不会等到所有的HTML都被解析完才开始建造和布局渲染树，当进程还在继续解<br>析源源不断的来自于网络的内容的时候，一部分内容会被解析并且显示出来。<br><img src="http://rainzhai.github.io/images/parser_step.png" alt="渲染流程"></p>
<h3 id="7-requirejs循环依赖问题"><a href="#7-requirejs循环依赖问题" class="headerlink" title="7 requirejs循环依赖问题"></a>7 requirejs循环依赖问题</h3><p>一.问题：A依赖B（即A引用B且调用B中的方法），B也依赖A，这即为循环依赖，那么，当B调用A中的方法时，会发现A为undefined，这就是循环依赖导致的问题。<br>二.解决循环依赖的方法：<br>1.用scope模式传参方式；<br>2.用pubsub解耦；<br>3.用require(“A”)的方式： </p>
<pre><code class="javascript">define([‘<span class="built_in">require</span>‘,‘jquery‘,‘a‘],
<span class="function"><span class="keyword">function</span>(<span class="params">require, $, a</span>)</span>{
<span class="keyword">return</span> {
loading : <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>{
<span class="built_in">require</span>(‘a‘).addBag(data);
}
}
});
</code></pre>
<h3 id="8-数组乱序"><a href="#8-数组乱序" class="headerlink" title="8 数组乱序"></a>8 数组乱序</h3><p>关于数组乱序，正确的解法应该是 Fisher–Yates Shuffle，复杂度 O(n)。</p>
<p>其实它的思想非常的简单，遍历数组元素，将其与之前的任意元素交换。因为遍历有从前向后和从后往前两种方式，所以该算法大致也有两个版本的实现。</p>
<p>从后往前的版本：</p>
<pre><code class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">shuffle</span>(<span class="params">array</span>) </span>{
  <span class="keyword">var</span> _array = array.concat();

  <span class="keyword">for</span> (<span class="keyword">var</span> i = _array.length; i--; ) {
    <span class="keyword">var</span> j = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (i + <span class="number">1</span>));
    <span class="keyword">var</span> temp = _array[i];
    _array[i] = _array[j];
    _array[j] = temp;
  }

  <span class="keyword">return</span> _array;
}
</code></pre>
<p><img src="https://segmentfault.com/a/1190000005875191" alt="数组乱序"></p>
<h3 id="9-js模板引擎原理"><a href="#9-js模板引擎原理" class="headerlink" title="9 js模板引擎原理"></a>9 js模板引擎原理</h3><h3 id="10-js深拷贝"><a href="#10-js深拷贝" class="headerlink" title="10 js深拷贝"></a>10 js深拷贝</h3>
      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2016/07/11/Apicloud开发app的问题总结/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Apicloud开发app的问题总结
        
      </div>
    </a>
  
  
    <a href="/2016/03/31/React-Native入门及一些问题处理/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">React Native入门及一些问题处理</div>
    </a>
  
</nav>

  


<div class="ds-thread" data-thread-key="2016/04/25/前端面试经典问题/"></div>

</article></section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>